<!-- 继承模板 -->
{%extends "base.html" %}

<!-- css 样式 -->
{% block css%}
#spider {
    margin:50px;
}
li > span.key {
    width:100px;
}
.spider_info {
    float:left;
    padding:15px;
    maging-bottom:10px;
    border:1px solid #000;
}
.spider_info > ul {
    list-style-type:none;
    padding:10px;
}
.spider_operate {
    float:left;
    padding-right:10px;
    margin-right:30px;
}
.log {
    float:left;
    margin-left:10px;
    width:300px;
}
ul {
    list-style-type:none;
}
.lst-task {
    clear:both;
    margin-top:5px;
    padding-top:20px;
}

.lst-task table {
    width:60%;
    text-align: center;
    padding-left:0px;
}
thead {
    background-color:#0080FF;
}
tbody > tr:nth-child(even) {
    background-color: #ccc;
}
tbody > tr:nth-child(odd) {
    background-color: rgb(187, 182, 182);
}

{% endblock %}

<!-- 内容 -->
{% block content %}
<!-- ajax -->
<script>
    // job状态检查函数
    function checkStatus(tr_sel){
        var check_url = tr_sel.children("td.job_status").attr("checkurl");
        $.get(check_url, function(data, status){
            var status_code = data.status_code;
            tr_sel.children("td.job_status").text(data.status);
            tr_sel.children("td.job_status").attr("status", status_code);
            //其他按钮的初始化
            if (status_code=="1"){
                tr_sel.find("td.add_job > button").attr("disabled", true);
                tr_sel.find("td.remove_job > button").attr("disabled", true);
                tr_sel.find("td.start_job > button").attr("disabled", true);
                tr_sel.find("td.pause_job > button").attr("disabled", false);
            } else if (status_code=="0"){
                tr_sel.find("td.add_job > button").attr("disabled", true);
                tr_sel.find("td.remove_job > button").attr("disabled", false);
                tr_sel.find("td.start_job > button").attr("disabled", false);
                tr_sel.find("td.pause_job > button").attr("disabled", true);   
            } else if (status_code=="-1"){
                tr_sel.find("td.add_job > button").attr("disabled", false);
                tr_sel.find("td.remove_job > button").attr("disabled", true);
                tr_sel.find("td.start_job > button").attr("disabled", true);   
                tr_sel.find("td.pause_job > button").attr("disabled", true);    
            }
        });
    };

    //加载页面时检查job状态
    $(document).ready(function(){
        $("tr[id^=row_]").each(function(){
            var check_url =$(this).children("td.job_status").attr("checkurl");
            var cur_sel=$(this);
            var is_timing = $(this).children("td.task_type").attr("is-timing");
           
            //对定时任务和非定时任务区别显示
            if (is_timing=="False") {
                cur_sel.find("td.add_job > button").attr("disabled", true);
                cur_sel.find("td.remove_job > button").attr("disabled", true);
                cur_sel.find("td.start_job > button").attr("disabled", true);   
                cur_sel.find("td.pause_job > button").attr("disabled", true);
                cur_sel.find("td.period").text("-");
                cur_sel.children("td.job_status").text("ready..");
            } else {
                checkStatus(cur_sel);
                cur_sel.find("td.run_once > button").attr("disabled", true);
            }
        });
        
    });

    //点击按钮后的状态变化
    $(document).ready(function(){
        //启动任务
        $("tr > td.start_job > button").click(function(){
            var url = $(this).parent().attr("relate-url");
            var tr_sel = $(this).parents("tr")
            $.get(url, function(data, status){
                checkStatus(tr_sel);
            });
        });
        //暂停任务
        $("tr > td.pause_job > button").click(function(){
            var url = $(this).parent().attr("relate-url");
            var tr_sel = $(this).parents("tr")
            $.get(url, function(data, status){
                checkStatus(tr_sel);
            });
        });
        //添加任务
        $("tr > td.add_job > button").click(function(){
            var url = $(this).parent().attr("relate-url");
            var tr_sel = $(this).parents("tr")
            $.get(url, function(data, status){
                checkStatus(tr_sel);
            });
        }); 
        //移除任务
        $("tr > td.remove_job > button").click(function(){
            var url = $(this).parent().attr("relate-url");
            var tr_sel = $(this).parents("tr")
            $.get(url, function(data, status){
                checkStatus(tr_sel);
            });
        }); 

        //运行任务一次
        $("tr > td.run_once > button").click(function(){
            var url = $(this).parent().attr("relate-url");
            var tr_sel = $(this).parents("tr")
            $.get(url, function(data, status){
                tr_sel.children("td.job_status").text(data.status);
            }) ;
        });           
    });

    //查看日志
    $(document).ready(function(){
        $("div.log > p > button").click(function(){
            $.get($("div.log").attr("relate-url"), function(data, status){
                logs = data.logs;
                $("div.log > ul > li").remove();
                for (i in logs){
                    $("div.log > ul").append("<li><a " + "href=" + logs[i].log_url +" target=_blank>"+ logs[i].log_starttime +"</a></li>");
                }
            });
        })
        });
</script>


<!-- 添加爬虫 -->
<div id="spider">
    <div class="spider_info" project="{{ spider.project_name }}" spider="{{ spider.spider_name }}" ip="{{ spider.ip }}" port="spider.port">
        <ul>
        {% for key, value in kv %}
        <li><span class="key">{{key}}</span>：<span class="value">{{value}}</span></li>
        {% endfor %}
        </ul>
    </div>
    <div class="spider_operate">
        <ul>
            <li><a href="#" >修改</a></li>
            <li><a href="#">删除</a></li>
        </ul>
    </div>
    <div class="log" relate-url="{% url 'list_joblog' %}?ip={{ spider.ip }}&port={{ spider.port }}&project={{ spider.project_name }}&spider={{ spider.spider_name }}">
        <p><button>查看日志</button></p>
        <ul>

        </ul>
    </div>
    <div class="lst-task">
        <p><a href="{% url 'add_task' sid=spider_id %}">创建任务</a></p>
        <table>
            <thead>
                <tr>
                    <th>TaskId</th>
                    <th>TaskName</th>
                    <th>IsTiming</th>
                    <th>Period</th>
                    <th>JobStatus</th>
                    <th>Delete</th>
                    <th colspan="4">定时</th>
                    <th>一次</th>
                </tr>
            </thead>
            <tbody>
                {% for task in tasks %}
                <tr id= "row_{{ task.task_id }}">
                    <td><a href="{% url 'update_task' tid=task.task_id %}">{{ task.task_id }}</a></td>
                    <td>{{ task.task_name }}</td>
                    <td class="task_type" is-timing={{ task.is_timing }}>{{ task.is_timing}}</td>
                    <td class="period">{{ task.every }}  {{ task.period }}</td>
                    <td class="job_status" status="" checkurl="{% url 'check_job' tid=task.task_id %}"></td>
                    <td><a href="{% url 'del_task' %}?tid={{ task.task_id }}&sid={{ spider_id }}">删除</a></td>
                    <td class="add_job" relate-url="{% url 'add_job' tid=task.task_id %}"><button>添加</button></td>
                    <td class="remove_job" relate-url="{% url 'remove_job' tid=task.task_id %}"><button>移除</button></td>
                    <td class="start_job" relate-url="{% url 'resume_job' tid=task.task_id %}"><button>启动</button></td>
                    <td class="pause_job"  relate-url="{% url 'pause_job' tid=task.task_id %}"><button>暂停</button></td>
                    <td class="run_once" relate-url="{% url 'run_once_job' tid=task.task_id %}"> <button>运行</button></td>
                </tr>
                {% endfor %}
            </tbody>
    </table>
    </div>
</div>

{% endblock %}